// JS的方法内置this关键字的指向
//     1. 普通函数 ：this指向与方法调用对象
//     2. 箭头函数 ：方法内没有this，使用的关键字this是当前方法外部最近的具有this的方法this
//                 this指向所在作用域(全局，方法构成的局部)
//     JS 方法this口诀：普通函数看调用，箭头函数看定义
function aaa(){
    console.log(this)
}
// window.aaa();
// 简写
aaa();
let obj = {
    info:"obj",
    printTest:function (){
        console.log(this)
    },
    printTest2:()=>{
        console.log(this)
    }
}
obj.printTest();
obj.printTest2();

let obj1 = {
    info:"obj1",
    getTestObj:function (){
        let obj2 = {
            info:"obj2",
            fun1:function (){
                console.log(this)
            },
            fun2:()=>{
                console.log(this)
            }
        }
        return obj2;
    }
}
let temp = obj1.getTestObj();
console.log(temp)
temp.fun1(); //obj2
temp.fun2(); // obj1


// 事件参数 ： 因绑定方式不同规则也不相同
let info = "全局变量";

// 1. 页面 on 方式事件绑定
//      因为页面的事件方法是以 () 描述事件指向的
//      所以可以直接基于 实参->形参 规则完成符合 JS语法的参数传递
function clickFunA(a,b,c,d,e,f,g){
    console.log(a)
    console.log(b)
    console.log(c)
    console.log(d)
    console.log(e)
    console.log(f)
    console.log(g)
}
// 页面事件传入的this，指的是方法绑定时所对于的标签元素的DOM对象
// 也买你事件传入的event关键字，event关键字是事件触发是的信息描述对象(事件源对象)
function clickFunB(dom,event){
    console.log(dom)
    console.log(event)
}
function printKeydown(e){
    console.log(e)
}
window.addEventListener("load",function (){
    // JS 的事件绑定参数
    //      JS 的事件绑定无论是属性赋值的静态方式，还是 addEventListener 的动态方法 都不需要手动执行方法
    //      因为方法的执行会由帮的事件自动完成
    //      所以JS的事件绑定缺少 显示的 方法执行代码，开发者无法传入实参，所以JS事件无法通过实参-形参方式传递参数
    //      js 事件的执行方法可以和js变量一起定义，通过JS变量的方式来实现类似与参数的规则
    let btn2 = document.querySelector("#btn2");
    // 静态事件属性的 赋值回调方法的参数
    let arg = "参数变量";
    // 模拟参数变化
    setTimeout(function (){
        arg = "新值"
    },4000)
    btn2.onclick=function (){
        console.log("js onclick 属性 方法")
        console.log(arg)
        console.log(info)
    }

    // 特殊参数
    //      JS 的事件绑定对于的执行方法，虽然不能自定义实参，但默认必然存在一个固定的事件源对象实参
    //      JS 的方法内置的关键字 this ，在DOM对象的事件绑定中执行与 被绑定的 dom对象
    //          ==> 方法必须是非箭头函数，this 才是DOM
    let btn3 = document.querySelector("#btn3");
    btn3.onclick = function (e){
        console.log(e)
        console.log(arguments)
        console.log(this)
    }
    // btn3.onclick = (e)=>{
    //     console.log(e)
    //     console.log(this)
    // }

    // 动态事件绑定参数规则等同于 静态属性赋值的参数规则
    let btn4 = document.querySelector("#btn4");
    btn4.addEventListener("click",function (event){
        console.log(event)
        console.log(this)
    })
    btn4.addEventListener("click", (event)=>{
        console.log(event)
        console.log(this)
    })
})
